<template>
  <div>
    <van-cell v-for="post in list" :key="post.id">
      <van-row class="van-rowstyle">
        <van-col>
          <van-image
            round
            fit="cover"
            :src="post.useravatar"
            width="2.3rem"
            height="2.3rem"
          />
        </van-col>
        <van-col
          :class="['usernamestyle', { 'vip-color': post.userrole === 'vip' }]"
          offset="1"
        >
          {{ post.username }}
        </van-col>
        <van-col offset="1">
          <van-tag
            v-if="post.userrole === 'admin'"
            plain
            type="primary"
            color="#808080"
            round
            >管理员</van-tag
          >
          <van-tag
            v-if="post.userrole === 'vip'"
            type="primary"
            color="black"
            text-color="gold"
            round
            style="font-style: italic"
            >VIP</van-tag
          >
        </van-col>
        <van-col offset="4">
          <van-popover
            v-model:show="post.showPopover"
            :actions="actions"
            @select="onSelectPost(post.id, post.userId)"
          >
            <template #reference> ... </template>
          </van-popover>
        </van-col>
      </van-row>
      <van-row class="van-rowstyle">
        <van-col class="contentstyle" offset="4">
          {{ post.content }}
        </van-col>
      </van-row>
      <van-row class="van-rowstyle" justify="space">
        <van-col offset="4" v-for="img in post.imagepath" :key="img">
          <van-image
            :src="img"
            fit="cover"
            width="6.5rem"
            height="6.5rem"
            @click="OnClickImage(img)"
          />
        </van-col>
      </van-row>
      <van-row class="van-rowstyle" justify="space-around">
        <van-col class="tagstyle" span="6" offset="1">
          #{{ post.tag }}
        </van-col>
        <van-col span="6" offset="1">
          {{ post.createTime }}
        </van-col>
      </van-row>
    </van-cell>
    <van-grid
      icon-size="17"
      direction="horizontal"
      :column-num="3"
      border="false"
    >
      <van-grid-item icon="share-o" text="分享" @click="showShare = true" />
      <van-grid-item icon="eye-o" :text="postSeeNum.toString()" />
      <van-grid-item
        icon="like-o"
        :text="likeNum.toString()"
        @click="PostFavour"
      />
    </van-grid>
    <van-swipe
      class="my-swipe"
      :autoplay="3000"
      lazy-render
      touchable="true"
      height="150"
    >
      <van-swipe-item v-for="image in images" :key="image">
        <van-image :src="image" fit="fill" />
      </van-swipe-item>
    </van-swipe>
    <van-cell
      center
      title="南院学堂online"
      label="长按识别二维码
关注公众号获得消息提醒"
    >
      <template #value>
        <van-image src="/qrcode.jpg" width="6.5rem" height="6.5rem"></van-image>
      </template>
    </van-cell>

    <van-cell>
      <van-row>
        <van-col span="4" offset="9" style="color: black">评论</van-col>
      </van-row>
    </van-cell>

    <van-list
      v-model:loading="loadingComment"
      :finished="finishedComment"
      finished-text="没有更多了"
      @load="onLoadComment"
    >
      <van-cell v-for="comment in listComment" :key="comment.id">
        <van-row class="van-rowstyle">
          <van-col>
            <van-image
              round
              fit="cover"
              :src="comment.useravatar"
              width="2rem"
              height="2rem"
            />
          </van-col>
          <van-col
            :class="[
              'usernamestyle',
              { 'vip-color': comment.userrole === 'vip' },
            ]"
            offset="1"
          >
            {{ comment.username }}
          </van-col>
          <van-col offset="1">
            <van-tag
              v-if="comment.userrole === 'admin'"
              plain
              type="primary"
              color="#808080"
              round
              >管理员</van-tag
            >
            <van-tag
              v-if="comment.userrole === 'vip'"
              type="primary"
              color="black"
              text-color="gold"
              round
              style="font-style: italic"
              >VIP</van-tag
            >
          </van-col>
          <van-col span="3">
            <van-tag
              v-if="postUserId == comment.userId"
              plain
              type="primary"
              color="#808080"
              >作者</van-tag
            >
          </van-col>
          <van-col>
            <van-popover
              v-model:show="comment.showPopover"
              :actions="actions"
              @select="
                onSelectComment(comment.id, comment.postId, comment.userId)
              "
            >
              <template #reference>... </template>
            </van-popover>
          </van-col>
        </van-row>
        <van-row
          class="van-rowstyle"
          justify="space-between"
          @click="OnClickComment(comment, 0)"
        >
          <van-col class="contentstyle" offset="3">
            {{ comment.content }}
          </van-col>
        </van-row>
        <van-row class="van-rowstyle" justify="space">
          <van-col offset="3" v-for="img in comment.imagepath" :key="img">
            <van-image
              :src="img"
              fit="cover"
              width="6.5rem"
              height="6.5rem"
              @click="OnClickImage(img)"
              ><template v-slot:error>加载失败</template></van-image
            >
          </van-col>
        </van-row>
        <van-row class="van-rowstyle" justify="end">
          <van-col
            class="tagstyle"
            v-if="
              comment.childrenComments.length > 0 &&
              comment.showchildren === false
            "
            @click="comment.showchildren = !comment.showchildren"
          >
            查看{{ comment.childrenComments.length }}条评论..
          </van-col>
          <van-col>
            {{ comment.createTime }}
          </van-col>
        </van-row>
        <van-row class="van-rowstyle" v-if="comment.showchildren">
          <van-col offset="2">
            <van-cell
              v-for="commentrq in comment.childrenComments"
              :key="commentrq.id"
            >
              <van-row class="van-rowstyle">
                <van-col>
                  <van-image
                    round
                    fit="cover"
                    :src="commentrq.useravatar"
                    width="2rem"
                    height="2rem"
                  />
                </van-col>
                <van-col
                  offset="1"
                  :class="[
                    'usernamestyle',
                    { 'vip-color': commentrq.userrole === 'vip' },
                  ]"
                >
                  {{ commentrq.username }}
                </van-col>
                <van-col offset="1">
                  <van-tag
                    v-if="commentrq.userrole === 'admin'"
                    plain
                    type="primary"
                    color="#808080"
                    round
                    >管理员</van-tag
                  >
                  <van-tag
                    v-if="commentrq.userrole === 'vip'"
                    type="primary"
                    color="black"
                    text-color="gold"
                    round
                    style="font-style: italic"
                    >VIP</van-tag
                  >
                </van-col>
                <van-col offset="1"
                  ><van-tag
                    v-if="postUserId == commentrq.userId"
                    plain
                    type="primary"
                    color="#808080"
                    >作者</van-tag
                  >
                </van-col>
                <van-col>
                  <van-popover
                    v-model:show="commentrq.showPopover"
                    :actions="actions"
                    @select="
                      onSelectCommentRq(
                        commentrq.id,
                        commentrq.postId,
                        commentrq.userId
                      )
                    "
                  >
                    <template #reference>... </template>
                  </van-popover>
                </van-col>
              </van-row>
              <van-row justify="start" @click="OnClickCommentRq(commentrq, 1)">
                <van-col class="atUserStyle" offset="4">
                  {{ commentrq.atUserName }}
                </van-col>
                <van-col class="contentstyle" offset="3">
                  {{ commentrq.content }}
                </van-col>
              </van-row>
              <van-row class="van-rowstyle" justify="space">
                <van-col
                  offset="3"
                  v-for="img in commentrq.imagepath"
                  :key="img"
                >
                  <van-image
                    :src="img"
                    fit="cover"
                    width="6.5rem"
                    height="6.5rem"
                    @click="OnClickImage(img)"
                    ><template v-slot:error>加载失败</template></van-image
                  >
                </van-col>
              </van-row>
              <van-row class="van-rowstyle" justify="end">
                <van-col>
                  {{ commentrq.createTime }}
                </van-col>
              </van-row>
            </van-cell>
          </van-col>
        </van-row>
      </van-cell>
    </van-list>
  </div>

  <van-overlay :show="showimg" z-index="2" @click="showimg = false">
    <van-popup>
      <van-image :src="popupimg" class="small-image">
        <template #error>图片加载失败</template>
      </van-image>
    </van-popup>
  </van-overlay>

  <!--评论贴子的-->
  <van-overlay :show="show" z-index="2">
    <van-popup :style="{ padding: '64px' }">
      <van-cell-group inset>
        <van-field
          v-model="message"
          rows="2"
          autosize
          label="评论"
          type="textarea"
          maxlength="200"
          placeholder="请输入评论内容"
          required
          show-word-limit
        />
        <van-cell center title="是否匿名">
          <template #right-icon>
            <van-switch v-model="checked" />
          </template>
        </van-cell>
        <van-cell>
          <van-uploader
            v-model="commentfileList"
            max-count="4"
            max-size="1024 * 1024"
            accept="image/*"
            multiple
            preview-size="5rem"
          />
        </van-cell>
        <van-cell
          >大于1M的图片无法上传，最多可上传4张&bigoplus;_&bigstar;!!</van-cell
        >
        <van-cell center title="我的积分：">{{ userpoints }}</van-cell>
        <van-cell justify="space-between">
          <van-button text="提交" @click="AddComment" />
          <van-button type="error" text="取消" @click="show = false" />
        </van-cell>
      </van-cell-group>
    </van-popup>
  </van-overlay>

  <!--评论评论的-->
  <van-overlay :show="showcomment" z-index="2">
    <van-popup :style="{ padding: '64px' }">
      <van-cell-group inset>
        <van-field
          v-model="message"
          rows="2"
          autosize
          label="评论"
          type="textarea"
          maxlength="200"
          :placeholder="placeholder"
          required
          show-word-limit
        />
        <van-cell center title="是否匿名">
          <template #right-icon>
            <van-switch v-model="checked" />
          </template>
        </van-cell>
        <van-cell>
          <van-uploader
            v-model="commentRqfileList"
            max-count="4"
            max-size="1024 * 1024"
            multiple
            accept="image/*"
            preview-size="5rem"
          />
        </van-cell>
        <van-cell
          >大于1M的图片无法上传，最多可上传4张&bigoplus;_&bigstar;!!</van-cell
        >
        <van-cell center title="我的积分：">{{ userpoints }}</van-cell>
        <van-cell name="center">
          <van-button text="提交" @click="AddCommentRq" />
          <van-button type="error" text="取消" @click="showcomment = false" />
        </van-cell>
      </van-cell-group>
    </van-popup>
  </van-overlay>

  <van-overlay :show="showShare" z-index="2" @click="showShare = false">
    <van-popup>
      <van-image src="/shareimg.png" class="small-image"> </van-image>
    </van-popup>
  </van-overlay>
  <van-tabbar>
    <van-cell-group inset>
      <van-field
        label="评论"
        placeholder="请输入评论"
        left-icon="chat-o"
        border="true"
        center="true"
        readonly="true"
        @click="OnClickPostComment"
      />
    </van-cell-group>
  </van-tabbar>
</template>

<script>
import MyAxios from "@/plugins/MyAxios";
import { ref } from "vue";
import { useRoute } from "vue-router";
import router from "@/router";
import { showLoadingToast, showNotify, showToast } from "vant";
import store from "@/store";

export default {
  setup() {
    const backPath = ref(store.state.backedPath);
    const username = "独孤求败";
    const route = useRoute();
    const postID = route.query.id;
    const postUserId = ref("");
    const list = ref([]);
    const userpoints = ref(0);
    const isauth = ref(0);

    const likeNum = ref(0);

    /**
     * 计算时间差
     * @param timeString
     * @returns {*}
     */
    const formatTimeDifference = (timeString) => {
      const now = new Date();
      const createTime = new Date(timeString);
      const diff = now - createTime;
      let result;

      if (diff < 0) {
        result = "未来时间";
      } else if (diff < 1000 * 60) {
        // 小于1分钟
        result = `${Math.floor(diff / 1000)} 秒前`;
      } else if (diff < 1000 * 60 * 60) {
        // 小于1小时
        result = `${Math.floor(diff / (1000 * 60))} 分钟前`;
      } else if (diff < 1000 * 60 * 60 * 24) {
        // 小于1天
        result = `${Math.floor(diff / (1000 * 60 * 60))} 小时前`;
      } else {
        const days = Math.floor(diff / (1000 * 60 * 60 * 24));
        result = `${days} 天前`;
      }

      return result;
    };

    const getUser = (id) => {
      const res = MyAxios.get("/user/get/vo", {
        params: {
          id: id,
        },
      });
      return res;
    };
    //浏览量加一
    MyAxios.get("/post/seeNumUp", { params: { postid: postID } });

    const postSeeNum = ref(0);

    MyAxios.get("/post/get/vo", {
      params: { id: postID },
    }).then(function (response) {
      const {
        anon,
        anon_name,
        content,
        createTime,
        favourNum,
        id,
        isDelete,
        tagList,
        thumbNum,
        title,
        updateTime,
        userId,
        seeNum,
        imgpath,
      } = response.data;

      likeNum.value = favourNum;

      postUserId.value = userId;
      const tag = tagList[0];

      let imagePaths = ref([]); // 更改为更具描述性的变量名
      try {
        imagePaths.value = JSON.parse(imgpath); // 直接解析到响应式引用的value中
      } catch (error) {
        console.error("Parsing imgpath failed:", error); // 添加错误处理
      }

      if (imagePaths.value != null) {
        for (let i = 0; i < imagePaths.value.length; i++) {
          // 使用模板字符串优化URL拼接
          imagePaths.value[
            i
          ] = `http://${backPath.value}/api/postimages/${imagePaths.value[i]}`;
        }
      }

      let useravatar = ref("");
      let username = ref("");
      let userrole = ref("");

      getUser(userId).then((res) => {
        const { userAvatar, userName, userRole } = res.data;

        if (userAvatar === null || anon === 1) {
          useravatar.value = store.state.anonImg;
        } else {
          useravatar.value =
            "http://" + backPath.value + "/api/userimages/" + userAvatar;
        }
        if (anon === 1) {
          username.value = anon_name;
        } else {
          username.value = userName;
        }
        if (userRole !== null) {
          userrole.value = userRole;
        }
      });

      postSeeNum.value = seeNum;
      list.value.push({
        anon,
        anon_name,
        content,
        createTime: formatTimeDifference(createTime),
        favourNum,
        id,
        isDelete,
        tag,
        thumbNum,
        title,
        updateTime,
        useravatar,
        username,
        userId,
        seeNum,
        imagepath: imagePaths.value,
        showPopover: false,
        userrole,
      });
    });

    const message = ref("");
    const checked = ref(false);
    const show = ref(false);

    let commentformdata = new FormData();

    const commentfileList = ref([]);

    const OnClickPostComment = () => {
      MyAxios.get("/user/get/login").then((res) => {
        const { code } = res;
        if (code !== 0) {
          showNotify({ type: "danger", message: "请先登录" });
          router.push({ path: "/login" });
        }
        const { userPoints, isAuth } = res.data;
        if (userPoints !== null) {
          userpoints.value = userPoints;
        }
        isauth.value = isAuth;
      });
      show.value = true;
    };

    let isSubmittingComment = false; // 添加一个状态标记，防止重复提交
    const AddComment = () => {
      if (isSubmittingComment) return; // 添加状态判断，防止重复提交
      isSubmittingComment = true;
      if (isauth.value === 0) {
        showToast({
          type: "warning",
          message: "请先到个人中心进行身份认证吧(>-<)!",
        });
        return;
      }
      if (userpoints.value <= 0) {
        showToast({
          type: "warning",
          message: "积分不足，请去个人中心签到领积分吧(>-<)!",
        });
        return;
      }
      const toast1 = showLoadingToast({
        message: "发布中...",
        forbidClick: true,
      });
      const anon = ref(0);
      if (checked.value) {
        anon.value = 1;
      }

      for (const fileElement of commentfileList.value) {
        commentformdata.append("files", fileElement.file);
      }
      commentformdata.append("anon", anon.value);
      commentformdata.append("content", message.value);
      commentformdata.append("postId", postID);
      setTimeout(() => {
        MyAxios.post("/comment/addComment", commentformdata).then(
          (response) => {
            toast1.close();
            const { code } = response.data;

            if (code === 40100) {
              showNotify({ type: "danger", message: "请先登录" });
              router.push("/login");
              show.value = false;
            } else {
              const { code, message } = response;
              if (code === 0) {
                show.value = false;
                location.reload();
              } else {
                showNotify({ type: "danger", message: "评论失败" });
                show.value = false;
              }
            }
            commentformdata = new FormData();
            isSubmittingComment = false; // 添加状态判断，防止重复提交
          }
        );
      }, 500);
    };

    const images = ["/postcontextimg1.png", "/postcontextimg2.png"];

    const loadingComment = ref(false);
    const finishedComment = ref(false);
    const listComment = ref([]);
    const listCommentRq = ref([]);

    const onLoadComment = async () => {
      if (finishedComment.value) return;
      loadingComment.value = true; // 设置正在加载状态

      MyAxios.get("/comment/getComment", {
        params: { postId: postID },
      }).then((response) => {
        try {
          const { data } = response;
          for (let i = 0; i < data.length; i++) {
            const {
              content,
              createTime,
              id,
              isDelete,
              postId,
              updateTime,
              userId,
              anon,
              anon_name,
              childrenComments,
              imgpath,
            } = data[i];

            let imagePaths = ref([]); // 更改为更具描述性的变量名
            try {
              imagePaths.value = JSON.parse(imgpath); // 直接解析到响应式引用的value中
            } catch (error) {
              console.error("Parsing imgpath failed:", error); // 添加错误处理
            }

            if (imagePaths.value != null) {
              for (let i = 0; i < imagePaths.value.length; i++) {
                // 使用模板字符串优化URL拼接
                imagePaths.value[
                  i
                ] = `http://${backPath.value}/api/commentimages/${imagePaths.value[i]}`;
              }
            }
            let useravatar = ref("");
            let username = ref("");
            let userrole = ref("");

            getUser(userId).then((res) => {
              const { userAvatar, userName, userRole } = res.data;

              if (userAvatar === null || anon === 1) {
                useravatar.value = store.state.anonImg;
              } else {
                useravatar.value =
                  "http://" + backPath.value + "/api/userimages/" + userAvatar;
              }
              if (anon === 1) {
                username.value = anon_name;
              } else {
                username.value = userName;
              }
              if (userRole !== null) {
                userrole.value = userRole;
              }
            });
            for (let j = 0; j < childrenComments.length; j++) {
              const {
                anon,
                anon_name,
                commentId,
                content,
                createTime,
                id,
                isDelete,
                parentId,
                postId,
                updateTime,
                userId,
                imgpath,
              } = childrenComments[j];

              let imagePaths = ref([]); // 更改为更具描述性的变量名
              try {
                imagePaths.value = JSON.parse(imgpath); // 直接解析到响应式引用的value中
              } catch (error) {
                console.error("Parsing imgpath failed:", error); // 添加错误处理
              }

              if (imagePaths.value != null) {
                for (let i = 0; i < imagePaths.value.length; i++) {
                  // 使用模板字符串优化URL拼接
                  imagePaths.value[
                    i
                  ] = `http://${backPath.value}/api/commentrqimages/${imagePaths.value[i]}`;
                }
              }

              let useravatar = ref("");
              let username = ref("");
              let userrole = ref("");

              getUser(userId).then((res) => {
                const { userAvatar, userName, userRole } = res.data;

                if (userAvatar === null || anon === 1) {
                  useravatar.value = store.state.anonImg;
                } else {
                  useravatar.value =
                    "http://" +
                    backPath.value +
                    "/api/userimages/" +
                    userAvatar;
                }
                if (anon === 1) {
                  username.value = anon_name;
                } else {
                  username.value = userName;
                }
                if (userRole !== null) {
                  userrole.value = userRole;
                }
              });

              let atUserName = ref("");
              if (parentId !== commentId) {
                MyAxios.get("/commentrq/getUserNameByParentId", {
                  params: {
                    parentId: parentId,
                  },
                }).then((res) => {
                  const { userName, anon_name } = res.data;
                  if (anon_name === null)
                    atUserName.value = "回复了" + userName + "：";
                  else atUserName.value = "回复了" + anon_name + "：";
                });
              }
              listCommentRq.value.push({
                commentId,
                content,
                createTime: formatTimeDifference(createTime),
                id,
                isDelete,
                parentId,
                postId,
                updateTime,
                userId,
                useravatar,
                username,
                atUserName,
                imagepath: imagePaths.value,
                showPopover: false,
                userrole,
              });
            }
            listComment.value.push({
              content,
              createTime: formatTimeDifference(createTime),
              id,
              isDelete,
              postId,
              updateTime,
              userId,
              useravatar,
              username,
              childrenComments: listCommentRq.value,
              imagepath: imagePaths.value,
              showchildren: false,
              showPopover: false,
              userrole,
            });
            listCommentRq.value = [];
          }
        } catch (error) {
          // 处理错误
          console.error(error);
        } finally {
          finishedComment.value = true; // 加载完成，设置结束状态
          loadingComment.value = false; // 加载完成，设置回非加载状态
        }
      });
    };

    const showimg = ref(false);
    const popupimg = ref("");

    const OnClickImage = (img) => {
      showimg.value = true;
      popupimg.value = img;
    };

    const placeholder = ref("");
    const showcomment = ref(false);
    const comment = ref({});
    const flag = ref(0);
    const OnClickComment = (Comment, Flag) => {
      MyAxios.get("/user/get/login").then((res) => {
        const { code } = res;
        const { userPoints, isAuth } = res.data;
        if (code !== 0) {
          showNotify({ type: "danger", message: "请先登录" });
          router.push({ path: "/login" });
        }
        if (userPoints !== null) {
          userpoints.value = userPoints;
        }
        isauth.value = isAuth;
      });
      showcomment.value = true;
      placeholder.value = "评论@" + Comment.username;
      comment.value = Comment;
      flag.value = Flag;
    };

    const OnClickCommentRq = (commentrq, Flag) => {
      MyAxios.get("/user/get/login").then((res) => {
        const { code } = res;
        const { userPoints, isAuth } = res.data;
        if (code !== 0) {
          showNotify({ type: "danger", message: "请先登录" });
          router.push({ path: "/login" });
        }
        if (userPoints !== null) {
          userpoints.value = userPoints;
        }
        isauth.value = isAuth;
      });
      showcomment.value = true;
      placeholder.value = "评论@" + commentrq.username;
      comment.value = commentrq;
      flag.value = Flag;
    };

    const commentRqfileList = ref([]);

    let commentRqformdata = new FormData();

    let isSubmittingCommentRq = false; // 添加一个状态标记，防止重复提交
    const AddCommentRq = () => {
      if (isSubmittingCommentRq) return; // 如果是正在提交中，则返回
      isSubmittingCommentRq = true; // 将状态标记为true
      if (isauth.value === 0) {
        showToast({
          type: "warning",
          message: "请先到个人中心进行身份认证吧(>-<)!",
        });
        return;
      }
      if (userpoints.value <= 0) {
        showToast({
          type: "warning",
          message: "积分不足，请去个人中心签到领积分吧(>-<)!",
        });
        return;
      }
      const toast1 = showLoadingToast({
        message: "发布中...",
        forbidClick: true,
      });
      const anon = ref(0);
      if (checked.value) {
        anon.value = 1;
      }
      const commentid = ref(0);
      let { id, commentId } = comment.value;

      const parentId = id;
      if (flag.value === 1) {
        commentid.value = commentId;
      } else {
        commentid.value = id;
      }

      for (const fileElement of commentRqfileList.value) {
        commentRqformdata.append("files", fileElement.file);
      }

      commentRqformdata.append("anon", anon.value);
      commentRqformdata.append("content", message.value);
      commentRqformdata.append("postId", postID);
      commentRqformdata.append("parentId", parentId);
      commentRqformdata.append("commentId", commentid.value);

      setTimeout(() => {
        MyAxios.post("/commentrq/addCommentRq", commentRqformdata).then(
          (response) => {
            toast1.close();
            const { code } = response.data;

            if (code === 40100) {
              showNotify({ type: "danger", message: "请先登录" });
              router.push("/login");
              show.value = false;
            } else {
              const { code, message } = response;
              if (code === 0) {
                show.value = false;
                location.reload();
              } else {
                showNotify({ type: "danger", message: "评论失败" });
                show.value = false;
              }
            }
            commentRqformdata = new FormData();
            isSubmittingCommentRq = false;
          }
        );
      }, 500);
    };
    const actions = [{ text: "举报" }];

    const onSelectPost = (postid, userid) => {
      MyAxios.post("/report/addreport", { postId: postid, userId: userid });
      showToast("举报成功");
    };
    const onSelectComment = (commentid, postid, userid) => {
      MyAxios.post("/report/addreport", {
        commentId: commentid,
        postId: postid,
        userId: userid,
      });
      showToast("举报成功");
    };
    const onSelectCommentRq = (commentrqid, postid, userid) => {
      MyAxios.post("/report/addreport", {
        commentrqId: commentrqid,
        postId: postid,
        userId: postid,
      });
      showToast("举报成功");
    };

    const haveFavour = ref(false);
    const PostFavour = () => {
      if (!haveFavour.value) {
        MyAxios.get("/post/favourPost", { params: { postid: postID } });
        haveFavour.value = true;
        likeNum.value += 1;
      }
    };

    const showShare = ref(false);

    return {
      AddComment,
      show,
      username,
      postID,
      checked,
      images,
      message,
      loadingComment,
      finishedComment,
      listComment,
      listCommentRq,
      onLoadComment,
      list,
      showimg,
      popupimg,
      OnClickImage,
      showcomment,
      placeholder,
      OnClickComment,
      OnClickCommentRq,
      AddCommentRq,
      commentfileList,
      commentRqfileList,
      userpoints,
      OnClickPostComment,
      actions,
      onSelectPost,
      onSelectComment,
      onSelectCommentRq,
      postUserId,
      PostFavour,
      likeNum,
      showShare,
      postSeeNum,
    };
  },
};
</script>

<style scoped>
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 1px;
  line-height: 2px;
  text-align: center;
  background-color: #39a9ed;
}
.clamp-lines {
  font-size: 16px;
  text-align: left;
}
.small-image {
  /* float: center; 是无效的，可以移除或替换为其他有效属性，如 display 或 margin */
  display: block; /* 使元素成为块级元素，便于居中 */
  margin-top: 100px; /* 垂直居中 */
  margin-bottom: auto; /* 垂直居中 */
  margin-left: auto; /* 水平居中 */
  margin-right: auto; /* 水平居中 */
  width: 70%; /* 或者具体的像素值 */
  height: auto; /* 保持宽高比 */
}

.contentstyle {
  /* 调整字体大小 */
  font-size: 16px; /* 或者您想要的任何大小 */

  color: black;
  text-align: left;
  line-height: 1.6;
  /* 调整字体类型 */
  font-family: Arial, sans-serif; /* 或者您喜欢的任何字体 */
}

.usernamestyle {
  font-size: 15px;
  line-height: 1.5;
  color: #394968;
}
.vip-color {
  color: transparent;
  background: linear-gradient(to right, red, orange);
  -webkit-background-clip: text; /* 将背景裁剪为文本区域 */
  -webkit-text-fill-color: transparent; /* 设置文本填充颜色为透明 */
}

.tagstyle {
  font-size: 15px;
  color: #00388b;
}
/* 调整行之间的间距 */
.van-rowstyle {
  margin-bottom: 5px; /* 在每行下方添加间距 */
}
.atUserStyle {
  font-size: 15px;
  line-height: 1.5;
  color: #72757e;
}
</style>
